<template>
    <div class="container">
        <div class="header">
            <div class="header-content">
                线名/机器
                <el-cascader v-model="value" :options="options" @change="handleChange" @visible-change="visibleChange"
                    ref="cascader" size="medium">
                    <template slot-scope="{ node, data }">
                        <span>{{ data.label }}</span>
                        <span class="cascader-label-right" v-if="node.isLeaf && !data.isMESLinkConnectting">[未连接]</span>
                    </template>
                </el-cascader>
                的实时生产状况
            </div>
        </div>
        <el-row :gutter="20" class="content-wrapper">
            <el-col :span="10">
                <div class="content-block">
                    <p>稼动率</p>
                    <v-chart class="chart utilize-chart" :option="utilizationOption()" :auto-resize="true" />
                    <div class="disable-util-container">
                        <!-- range -->
                        <el-slider :disabled="!disableUtilRealTime" v-model="endTIme" :marks="sliderMarks"
                            :min="startTime" :max="endTIme" :format-tooltip="formatTooltip"
                            @change="handleSliderChange">
                        </el-slider>
                    </div>
                    <div class="date-container">
                        <span> {{ startDate }}</span>
                        <span>{{ endDate }}</span>
                    </div>
                    <div class="disable-util-check">
                        <el-checkbox v-model="disableUtilRealTime" :disabled="value.length === 0">禁用实时更新</el-checkbox>
                    </div>
                </div>
            </el-col>

            <el-col :span="8">
                <div class="content-block">
                    <p>材料使用情况</p>
                    <div class="charts-container">
                        <v-chart class="chart" :option="materialOption1()" :auto-resize="true" />
                        <v-chart class="chart" :option="materialOption2()" :auto-resize="true" />
                    </div>
                </div>
            </el-col>

            <el-col :span="6">
                <div class="content-block">
                    <p>周期</p>
                    <v-chart class="chart1" :option="periodOption()" :auto-resize="true" />
                </div>
            </el-col>
        </el-row>
        <el-row class="content-wrapper" :gutter="20">
            <!-- 左侧：文字信息和图片 -->
            <el-col :span="5">
                <div class="horizontal-container">
                    <p class="info-item">程式名: {{ formdata.machineName }}</p>
                    <p class="info-item">状态描述: {{ formdata.machineStatusDesc }}</p>
                </div>
                <div class="image-container">
                    <p class="info-item machine-status" style="margin-left: 2em;width: 128px;">
                        <!-- <span class="status-label">机器状态:</span> -->
                        <span class="status-icon">
                            <template v-if="formdata.machineStatus === 1">
                                <img src="../../assets/img7/greenStatus.svg" alt="绿色状态" width="30px">
                                <img style="margin-left:5px;" src="../../assets/img7/blackStatus.svg" alt="绿色状态"
                                    width="30px">
                                <img style="margin-left:5px;" src="../../assets/img7/blackStatus.svg" alt="绿色状态"
                                    width="30px">
                            </template>
                            <template v-else-if="formdata.machineStatus === 2">
                                <img src="../../assets/img7/blackStatus.svg" alt="黄色状态" width="30px">
                                <img style="margin-left:5px;" src="../../assets/img7/yellowStatus.svg" alt="黄色状态"
                                    width="30px">
                                <img style="margin-left:5px;" src="../../assets/img7/blackStatus.svg" alt="黄色状态"
                                    width="30px">
                            </template>
                            <template v-else-if="formdata.machineStatus === 3">
                                <img src="../../assets/img7/blackStatus.svg" alt="红色状态" width="30px">
                                <img style="margin-left:5px;" src="../../assets/img7/blackStatus.svg" alt="红色状态"
                                    width="30px">
                                <img style="margin-left:5px;" src="../../assets/img7/redStatus.svg" alt="红色状态"
                                    width="30px">
                            </template>
                        </span>
                    </p>
                    <img style="margin-top:-38px;" src="../../assets/img7/ys-gpxc.png" alt="设备图片" class="machine-image">
                </div>
            </el-col>

            <!-- 右侧：表格 -->
            <el-col :span="19">
                <div class="table-container">
                    <p class="table-title">GPX Machine Event：</p>
                    <el-table :data="eventLogData" border :header-cell-style="headerStyleEvent">
                        <el-table-column prop="dateTimeStr" label="时间" align="center"></el-table-column>
                        <el-table-column prop="line" label="线体" align="center"></el-table-column>
                        <el-table-column prop="machine" label="机器" align="center"></el-table-column>
                        <el-table-column prop="state" label="状态" align="center"></el-table-column>
                        <el-table-column prop="desc" label="描述" align="center"></el-table-column>
                    </el-table>
                </div>
            </el-col>
        </el-row>

    </div>
</template>

<script>
import { getLineMachine, getGPXsingle, getSingleGPXDateSSEUrl, getGPXsingleUtilization, getGPXsingleEventlog } from '@/network/gpx';
import { Notification } from 'element-ui';
import dayjs from 'dayjs';
export default {
    data() {
        return {
            formdata: {},
            value: [],
            options: [],
            selected: {},
            utilizationTimeValue: 100, // 当前值
            disableUtilRealTime: false,
            sliderMarks: {},
            startTimeFeatch: 0,
            startTime: 0,
            endTIme: 100,
            startDate: "",
            endDate: "",
            eventLogData: []
        };
    },
    mounted() {
        this.$nextTick(() => {
            this.getLineMachineData();
        });
    },
    methods: {
        headerStyleEvent() {
            return { background: '#f5f5f5', color: '#2F4F4F' };
        },
        formatTooltip(value) {
            return dayjs(value).format('HH:mm'); // 格式化 tooltip 显示的时间
        },
        handleSliderChange(value) {
            const endDate = dayjs(value).format('YYYY-MM-DD ');
            const endTIme = dayjs(value).format('HH:mm:ss');
            this.handleGPXsingleUtilization(endDate, endTIme)
        },
        async handleGPXsingleUtilization(endDate, endTIme) {
            try {
                const res = await getGPXsingleUtilization({
                    lineName: this.selected.lineName,
                    machineName: this.selected.machineName,
                    startDate: this.startDate,
                    startTime: this.startTimeFeatch,
                    endDate: endDate,
                    endTIme: endTIme
                })
                this.formdata.utilizationRate = res.data.utilizationRate
            } catch (error) {
                console.log(error);
            }
        },
        async getLineMachineData() {
            try {
                Notification.closeAll();
                const result = await getLineMachine();
                if (result) {
                    if (result.status) {
                        if (result.status != 200) {
                            this.$notify.error({
                                title: '获取线体/机器出错',
                                message: result.message,
                                offset: document.documentElement.clientHeight * 1 / 3,
                                duration: 0
                            });
                            return;
                        }
                        this.options = this.formatLineMachineData(result.data);
                    }
                    else {
                        this.options = this.formatLineMachineData(result);
                    }
                }

            } catch (error) {
                console.log(error);
            }
        },
        async getEventlog() {
            try {
                const res = await getGPXsingleEventlog({
                    lineName: this.selected.lineName,
                    machineName: this.selected.machineName,
                    page: 1,
                    limit: 20
                })
                if (res.status == 200) {
                    this.eventLogData = res.data
                } else {
                    this.$message({
                        message: '获取Eventlog错误',
                        type: 'error'
                    });
                }
            } catch (error) {
                console.log(error);
            }
        },
        async getGPXsingleData() {
            try {
                Notification.closeAll();
                const res = await getGPXsingle(this.selected);
                console.log(res);

                if (res) {
                    if (res.data.machineName) {
                        this.formdata = res.data;
                        this.startTime = dayjs(res.data.utilizationRateExt.startTime).valueOf();
                        this.startTimeFeatch = dayjs(res.data.utilizationRateExt.startTime).format('HH:mm:ss')
                        this.endTIme = dayjs(res.data.utilizationRateExt.endTIme).valueOf();
                        this.startDate = res.data.utilizationRateExt.startDate;
                        this.endDate = res.data.utilizationRateExt.endDate;
                        this.updateSliderMarks();
                        this.getEventlog()
                    }
                    else {
                        if (res.status != 200) {
                            this.$notify.error({
                                title: '获取生产数据出错',
                                message: res.message,
                                offset: document.documentElement.clientHeight * 1 / 3,
                                duration: 0
                            });
                            return;
                        }

                    }
                }
            } catch (error) {
                console.log(error);
            }
            this.startSSEListen();
        },
        updateSliderMarks() {
            // 计算时间段的每个标记
            const interval = (this.endTIme - this.startTime) / 10;
            let marks = {};

            // 生成中间的标记（标记从开始时间到结束时间的中间间隔）
            for (let i = 0; i <= 10; i++) {
                const timeMark = dayjs(this.startTime + interval * i);
                const timeLabel = timeMark.format('HH:mm'); // 中间的标记显示为小时和分钟
                marks[this.startTime + interval * i] = { label: timeLabel };
            }

            this.sliderMarks = marks;

        },
        formatLineMachineData(data) {
            return data.map(line => ({
                label: line.lineName,
                value: line.lineName,//line.lineId,
                children: line.machines.map(machine => ({
                    isMESLinkConnectting: machine.isMESLinkConnectting,
                    label: machine.machineName,
                    value: machine.machineName //machine.machineId
                }))
            }));
        },
        async visibleChange(visible) {
            if (visible) {
                if (!this.options || this.options.length === 0) {
                    await this.getLineMachineData();
                }
            }
        },
        handleChange(value) {
            const [lineName, machineName] = value;

            this.selected = {
                lineName: lineName,
                machineName: machineName
            };
            // 保证选择
            let nodeInfo = this.$refs['cascader'].getCheckedNodes(true)
            if (!nodeInfo[0].data.isMESLinkConnectting) {
                this.$message({
                    message: '选择的GPX机器没有MES Link连接到当前Server！',
                    type: 'info',
                    duration: 3800,
                    offset: document.documentElement.clientHeight * 1 / 4
                });
                return;
            }
            //调用刷新
            this.getGPXsingleData();
        },
        utilizationOption() {
            // 检查 formdata 和 utilizationRate 是否已定义
            if (!this.formdata || !this.formdata.utilizationRate) {
                return {}; // 返回空对象以防止错误
            }

            return {
                tooltip: {
                    trigger: 'item',
                    position: 'right',
                    formatter: '{b} <br/>{c}'
                },
                legend: {
                    orient: 'vertical',
                    x: 'left',
                    // y: 'center'
                },
                series: [
                    {
                        name: 'Access From',
                        type: 'pie',
                        // top: '20%',
                        left: '20%',
                        // height:'90%',
                        radius: '90%',
                        data: [
                            {
                                value: (this.formdata.utilizationRate.operatingTime || 0) +
                                    (this.formdata.utilizationRate.waitPreviousTime || 0) +
                                    (this.formdata.utilizationRate.waitNextTime || 0) +
                                    (this.formdata.utilizationRate.readyTime || 0) +
                                    (this.formdata.utilizationRate.cleaningTime || 0),
                                name: '操作清洗准备等待时间',
                                itemStyle: { color: '#9A60B4' } // 紫色
                            },
                            {
                                value: this.formdata.utilizationRate.autoProductionTime || 0,
                                name: '生产时间',
                                itemStyle: { color: 'green' } // 绿色
                            },
                            // {
                            //     value: this.formdata.utilizationRate.cleaningTime || 0,
                            //     name: '清洗时间'
                            // },
                            {
                                value: this.formdata.utilizationRate.otherTime || 0,
                                name: '其他时间',
                                itemStyle: { color: 'gray' } // 灰色
                            },
                            {
                                value: this.formdata.utilizationRate.errorTime || 0,
                                name: '错误时间',
                                itemStyle: { color: '#DC143C' } // 红色
                            },
                            // {
                            //     value: this.formdata.utilizationRate.readyTime || 0,
                            //     name: '准备时间'
                            // },
                            // {
                            //     value: this.formdata.utilizationRate.waitNextTime || 0,
                            //     name: '等后时间'
                            // },
                            // {
                            //     value: this.formdata.utilizationRate.waitPreviousTime || 0,
                            //     name: '等前时间'
                            // }
                        ],
                        label: {
                            normal: {
                                show: true,
                                position: 'inner',
                                formatter: '{d}%'
                            },
                        }
                    }
                ]
            };
        },
        // 进度条
        materialOption1() {
            if (!this.formdata || !this.formdata.materialUsageInfo) {
                return {}; // 返回空对象以防止错误
            }

            return {
                grid: {
                    left: '10',
                    top: '10',
                    right: '30',
                    bottom: '0',
                    containLabel: true
                },
                xAxis: {
                    type: 'value',
                    splitLine: { show: false },
                    axisLabel: { show: false },
                    axisTick: { show: false },
                    axisLine: { show: false }
                },
                yAxis: {
                    type: 'category',
                    axisTick: { show: false },
                    axisLine: { show: false },
                    axisLabel: {
                        fontSize: 14
                    },
                    data: ['底座', '后刮刀', '前刮刀', '钢网']
                },
                series: [
                    {
                        name: '',
                        type: 'bar',
                        barWidth: 14,
                        data: [
                            Math.min(this.formdata.materialUsageInfo.backup.backupCurrCnt, this.formdata.materialUsageInfo.backup.backupMaxCnt),
                            Math.min(this.formdata.materialUsageInfo.rearSqueegee.squeegeeCurrCnt, this.formdata.materialUsageInfo.rearSqueegee.squeegeeMaxCnt),
                            Math.min(this.formdata.materialUsageInfo.frontSqueegee.squeegeeCurrCnt, this.formdata.materialUsageInfo.frontSqueegee.squeegeeMaxCnt),
                            Math.min(this.formdata.materialUsageInfo.mask.maskCurrCnt, this.formdata.materialUsageInfo.mask.maskMaxCnt)
                        ],
                        label: {
                            show: true,
                            offset: [0, 1],
                            formatter: (params) => {
                                let realValue = [
                                    this.formdata.materialUsageInfo.backup.backupCurrCnt,
                                    this.formdata.materialUsageInfo.rearSqueegee.squeegeeCurrCnt,
                                    this.formdata.materialUsageInfo.frontSqueegee.squeegeeCurrCnt,
                                    this.formdata.materialUsageInfo.mask.maskCurrCnt
                                ][params.dataIndex];
                                return `${realValue}`; // 显示真实数值
                            },
                            color: 'rgba(0,0,0,.7)',
                            fontSize: 14
                        },
                        itemStyle: {
                            normal: {
                                barBorderRadius: 10,
                                color: (params) => {
                                    let value = [
                                        this.formdata.materialUsageInfo.backup.backupCurrCnt,
                                        this.formdata.materialUsageInfo.rearSqueegee.squeegeeCurrCnt,
                                        this.formdata.materialUsageInfo.frontSqueegee.squeegeeCurrCnt,
                                        this.formdata.materialUsageInfo.mask.maskCurrCnt
                                    ][params.dataIndex];

                                    let threshold = [
                                        this.formdata.materialUsageInfo.backup.backupThresholdCnt,
                                        this.formdata.materialUsageInfo.rearSqueegee.squeegeeThresholdCnt,
                                        this.formdata.materialUsageInfo.frontSqueegee.squeegeeThresholdCnt,
                                        this.formdata.materialUsageInfo.mask.maskThresholdCnt
                                    ][params.dataIndex];

                                    let max = [
                                        this.formdata.materialUsageInfo.backup.backupMaxCnt,
                                        this.formdata.materialUsageInfo.rearSqueegee.squeegeeMaxCnt,
                                        this.formdata.materialUsageInfo.frontSqueegee.squeegeeMaxCnt,
                                        this.formdata.materialUsageInfo.mask.maskMaxCnt
                                    ][params.dataIndex];

                                    // 根据当前值与阈值和最大值的比较，返回对应颜色
                                    if (value < threshold) {
                                        return '#32CD32'; // 绿色
                                    } else if (value >= threshold && value < max) {
                                        return '#FFD700'; // 黄色
                                    } else {
                                        return '#DC143C'; // 红色
                                    }
                                }
                            }
                        },
                        zlevel: 1
                    },
                    {
                        name: '进度条背景',
                        type: 'bar',
                        label: {
                            show: true,
                            position: 'right',
                            offset: [0, 0],
                            fontSize: 14
                        },
                        barGap: '-100%',
                        barWidth: 14,
                        data: [
                            this.formdata.materialUsageInfo.backup.backupMaxCnt,
                            this.formdata.materialUsageInfo.rearSqueegee.squeegeeMaxCnt,
                            this.formdata.materialUsageInfo.frontSqueegee.squeegeeMaxCnt,
                            this.formdata.materialUsageInfo.mask.maskMaxCnt
                        ],
                        color: 'rgba(0,0,0,.2)',
                        itemStyle: {
                            normal: {
                                barBorderRadius: 10
                            }
                        }
                    }
                ]
            };
        },

        //电池图
        materialOption2() {
            if (!this.formdata || !this.formdata.materialUsageInfo) {
                return {}; // 返回空对象以防止错误
            }

            const currSeriesData = [
                Math.min(parseInt(this.formdata.materialUsageInfo.solder.remainderSolderPercent), 100),
                Math.min(parseInt(this.formdata.materialUsageInfo.remainderSolventPercent), 100),
                Math.min(parseInt(this.formdata.materialUsageInfo.remainderPaperPercent), 100)
            ]
            // const names = ['钢网', '酒精', '无尘纸']; // 对应名称
            const names = ['锡膏', '清洗剂', '清洗纸']; // 对应名称

            return {
                series: [
                    {
                        name: names[0],
                        type: 'gauge',
                        center: ['16%', '40%'], // 第一个环形图位置
                        radius: '70%',
                        startAngle: 90,
                        endAngle: -270,
                        axisLine: {
                            lineStyle: {
                                width: 20, // 调整圆环宽度
                                color: [
                                    [currSeriesData[0] / 100, '#6495ED'], // 进度条颜色
                                    [1, 'rgba(76, 105, 125, 0.1)'] // 背景色
                                ]
                            }
                        },
                        pointer: { show: false }, // 隐藏指针
                        axisTick: { show: false }, // 隐藏刻度
                        splitLine: { show: false }, // 隐藏分割线
                        axisLabel: { show: false }, // 隐藏刻度标签
                        detail: {
                            show: true,
                            formatter: `{value}%`, // 仅显示百分比
                            offsetCenter: [0, '0%'], // 数据（百分比）显示在圆环正中间
                            textStyle: {
                                fontSize: 14,
                                color: '#333'
                            }
                        },
                        title: {
                            show: true,
                            offsetCenter: [0, '150%'], // 名称显示在环下方，并增加间距
                            textStyle: {
                                fontSize: 14,
                                color: '#333'
                            }
                        },
                        data: [{ value: currSeriesData[0], name: names[0] }]
                    },
                    {
                        name: names[1],
                        type: 'gauge',
                        center: ['48%', '40%'], // 第二个环形图位置
                        radius: '70%',
                        startAngle: 90,
                        endAngle: -270,
                        axisLine: {
                            lineStyle: {
                                width: 20, // 调整圆环宽度
                                color: [
                                    [currSeriesData[1] / 100, '#03cfb4'],
                                    [1, 'rgba(76, 105, 125, 0.1)']
                                ]
                            }
                        },
                        pointer: { show: false },
                        axisTick: { show: false },
                        splitLine: { show: false },
                        axisLabel: { show: false },
                        detail: {
                            show: true,
                            formatter: `{value}%`, // 仅显示百分比
                            offsetCenter: [0, '0%'], // 数据（百分比）显示在圆环正中间
                            textStyle: {
                                fontSize: 14,
                                color: '#333'
                            }
                        },
                        title: {
                            show: true,
                            offsetCenter: [0, '150%'], // 名称显示在环下方，并增加间距
                            textStyle: {
                                fontSize: 14,
                                color: '#333'
                            }
                        },
                        data: [{ value: currSeriesData[1], name: names[1] }]
                    },
                    {
                        name: names[2],
                        type: 'gauge',
                        center: ['80%', '40%'], // 第三个环形图位置
                        radius: '70%',
                        startAngle: 90,
                        endAngle: -270,
                        axisLine: {
                            lineStyle: {
                                width: 20, // 调整圆环宽度
                                color: [
                                    [currSeriesData[2] / 100, '#32CD32'],
                                    [1, 'rgba(76, 105, 125, 0.1)']
                                ]
                            }
                        },
                        pointer: { show: false },
                        axisTick: { show: false },
                        splitLine: { show: false },
                        axisLabel: { show: false },
                        detail: {
                            show: true,
                            formatter: `{value}%`, // 仅显示百分比
                            offsetCenter: [0, '0%'], // 数据（百分比）显示在圆环正中间
                            textStyle: {
                                fontSize: 14,
                                color: '#333'
                            }
                        },
                        title: {
                            show: true,
                            offsetCenter: [0, '150%'], // 名称显示在环下方，并增加间距
                            textStyle: {
                                fontSize: 14,
                                color: '#333'
                            }
                        },
                        data: [{ value: currSeriesData[2], name: names[2] }]
                    }
                ]
            };
        },
        //柱状图
        periodOption() {
            if (!this.formdata || !this.formdata.period) {
                return {}; // 返回空对象以防止错误
            }
            return {
                grid: {
                    height: "90%",
                    bottom: '1em',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: this.formdata.period.lastPanelCycleTimes.map((v, i) => i + 1),
                    axisTick: {
                        alignWithLabel: true
                    }
                },
                yAxis: {
                    type: 'value',
                },
                tooltip: {
                    trigger: 'axis',
                    formatter: '{c}'
                },
                // backgroundColor: this.formdata.period.lastPanelAvgCycleTime > this.formdata.period.maxCycleTime ?
                //     'rgba(255, 0, 0, 0.5)' : (this.formdata.period.lastPanelAvgCycleTime > this.formdata.period.thresholdCycleTime ?
                //         'yellow' : ''),
                series: [
                    {
                        data: this.formdata.period.lastPanelCycleTimes.map(v => v.cycleTime),
                        type: 'bar',
                        barWidth: 10,
                        itemStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [
                                    { offset: 0, color: '#67E0E3' },
                                    { offset: 0.5, color: '#188df0' },
                                    { offset: 1, color: '#37A2DA' }
                                ]
                            },

                        },
                        markLine: {
                            symbol: ['none', 'none'],
                            data: [
                                {
                                    yAxis: this.formdata.period.recipeCycleTime,
                                    lineStyle: {
                                        type: 'dashed',
                                        color: '#F04134',
                                        width: this.formdata.period.recipeCycleTime > 0 ? 1 : 0,
                                    },
                                    label: {
                                        position: "middle",
                                        fontSize: 12,
                                        color: '#F04134',
                                        formatter: this.formdata.period.recipeCycleTime > 0 ? `标准${this.formdata.period.recipeCycleTime}s` : "",
                                    },
                                },
                                {
                                    yAxis: this.formdata.period.lastPanelAvgCycleTime,
                                    lineStyle: {
                                        type: "dashed",
                                        color: "green",
                                        width: 1,
                                    },
                                    label: {
                                        position: "middle",
                                        fontSize: 12,
                                        color: "green",
                                        formatter: `平均${this.formdata.period.lastPanelAvgCycleTime}s`,
                                    }
                                }
                            ]
                        }
                    }
                ]
            };
        },
        startSSEListen() {
            this.eventSource = new EventSource(getSingleGPXDateSSEUrl(this.selected));
            let eventSource = this.eventSource;
            let esOpened = false;
            eventSource.addEventListener("open", function (e) {
                esOpened = true;
                console.log("EventSource started", e);
            }, false);
            eventSource.onmessage = event => {
                // const resultDiv = document.getElementById("result");
                console.log("event.data", event.data);
                const result = JSON.parse(event.data);
                if (!result.data) {
                    return;
                }
                const _useObj = {};
                if (this.disableUtilRealTime) {
                    _useObj.utilizationRate = this.formdata.utilizationRate
                }
                this.formdata = Object.assign(result.data, _useObj);
                if (result.data.machineEvent) {
                    this.eventLogData.unshift(result.data.machineEvent)
                }
            };
            eventSource.onerror = e => {
                console.log("EventSource failed", e);
                if (e.eventPhase == EventSource.CLOSED) {
                    console.log("Connection closed", e);
                    eventSource.close();
                    esOpened = false;
                }
                else {
                }
                esOpened && this.startSSEListen(); // 重连
            }
            eventSource.onclose = function (e) {
                console.log("EventSource closed", e);
                esOpened = false;
            }
        }
    },
    beforeRouteLeave(to, from, next) {
        // 导航离开当前路由的时候被调用，this可以被访问到
        // console.log(this) // 可以访问this
        // console.log('beforeRouteLeave')
        if (this.eventSource) {
            this.eventSource.close();
            this.eventSource = null;
        }
        next()
    }
};
</script>

<style scoped>
.container {
    /* padding: 20px; */
    border-radius: 10px;
    width: 100%;
    /* max-width: 1200px; */
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100vh;
    box-sizing: border-box;
}

.charts-container {
    display: flex;
    width: 100%;
    flex-direction: column;
    /* 将排列方向改为纵向 */
    justify-content: space-between;
    /* 上下间隔平均分配 */
}

.header {
    font-size: 24px;
    color: black;
    margin-bottom: 20px;
    text-align: center;
    display: flex;
    /* 使用 Flexbox 布局 */
    justify-content: center;
    /* 水平居中 */
    align-items: center;
    /* 垂直居中 */
}

.header-content {
    display: flex;
    /* 使内容也使用 Flexbox */
    align-items: center;
    /* 垂直居中 */
}

.content-wrapper {
    width: 100%;
    margin-top: 10px;
}

.horizontal-container {
    display: flex;
    flex-direction: column;

}

.info-item {
    font-size: 16px;
    margin-bottom: 5px;
}

.machine-status {
    display: flex;
    align-items: center;
}

.status-icon img {
    width: 35px;
    margin-left: 5px;
}

.image-container {
    margin-top: 20px;
}

.machine-image {
    width: 200px;
    height: 200px;
}

.table-container {
    margin-top: 20px;
}

.table-title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
}


.content-block1 {
    background-color: white;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.content-block {
    background-color: white;
    border-radius: 10px;
    padding: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    text-align: center;

    display: flex;
    flex-direction: column;
    align-items: center;
    /* 垂直居中 */
    justify-content: center;
    /* 水平居中 */
}

p {
    font-size: 16px;
    /* margin-bottom: 5px; */
}

.chart {
    height: 150px;
    /* 330px*/
    /* width: 200px; */
}

.chart1 {
    height: 300px;
}

.chart.utilize-chart {
    height: 263px;

}



.cascader-label-right {
    color: orangered;
    position: absolute;
    right: .6em;
}

.disable-util-container {
    width: 100%;
}

::v-deep .disable-util-container .el-slider__runway.disabled .el-slider__bar {
    background-color: #82b8ef;
}

.disable-util-check {
    text-align: right;
    width: 100%;
    margin-top: 15px;
}

.date-container {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-top: 10px;
}

.date-container span {
    font-size: 14px;
    color: #909399;
}
</style>
